{% extends "./inc_base.html" %}
{%block body%}class="header-scroll-reveal"{%endblock%}
{% block middle %}
<!-- start :: blog content -->
<div class="section pt-4">
    <div class="container">

        <div class="row g-xl-5">

            <div class="col-lg-9 order-2 order-lg-1">

                <div class="mb-4">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb small mb-3">
                            {%for item in breadcrumb%}
                            <li class="breadcrumb-item"><a href="{{item.url}}">{{item.name}}</a></li>
                            {%endfor%}
                            <li class="breadcrumb-item">详情</li>
                        </ol>
                    </nav>
                    <h1 class="h3 mb-0">
                        {{detail.title}}
                    </h1>
                    <p class="d-block text-muted small">
                        发布时间: <time
                            datetime="{{helper.moment(detail.createdAt).format('YYYY-MM-DD HH:mm:ss')}}">{{helper.moment(detail.createdAt).format('YYYY-MM-DD
                            HH:mm:ss')}}</time>
                    </p>

                </div>
                {%if detail.models_uuid==='e86401ba-85cb-47f7-9f53-853e26b939bd'%}
                <div class="article-format">
                    {{detail.cms_doc_article.content|safe}}
                </div>
                {%elif detail.models_uuid==='4e0da60c-13af-4965-8f35-e2b13742398e'%}
                <!--
						In order for lazyload to work, a height is required, else all images are in viewport.
						By default, an empty png is set with 300px height:
						http://png-pixel.com/
					-->
                <div class="row">
                    {% for item in detail.cms_doc_picture.content%}
                    <div class="col-6 col-lg-4 mb-3">

                        <div class="bg-white p-2 shadow-primary-xs transition-hover-top transition-all-ease-250">
                            <a href="{{item.url}}" data-fancybox="gallery"
                                class="fancybox fancybox-primary d-block overflow-hidden overlay-dark-hover overlay-opacity-2 text-decoration-none text-dark">
                                <img class="img-fluid lazy rounded" data-src="{{item.url}}" src="" alt="...">
                            </a>
                            <div class="p-2">
                                <h6 class="m-0">
                                    {{item.desc}}
                                </h6>
                            </div>
                        </div>

                    </div>
                    {%endfor%}
                </div>

                {%elif detail.models_uuid==='aac4b5a3-89f2-4c41-9213-39f43dcc0860'%}

                <div class="row">
                    <div class="col mb-3">
                        {%if detail.cover_url%}
                        <figure class="mb-3">
                            <img class="img-fluid" src="{{detail.cover_url}}" alt="...">
                        </figure>
                        {%endif%}
                        {%if detail.cms_doc_download.desc%}
                        {{detail.cms_doc_download.desc|safe}}
                        {%endif%}
                    </div>
                    <div class="col-12 col-lg-3 mb-3 ">
                        <!-- specifications -->
                        <div class="sticky-kit z-index-0 bg-w">
                            <div class="card">
                                <div class="card-body">
                                    <h3 class="h5">
                                        下载列表
                                    </h3>

                                    <!-- specs list -->
                                    <ul class="list-unstyled mb-0">
                                        {%for item in detail.cms_doc_download.content%}
                                        <li class="list-item clearfix border-bottom py-2">
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#d-{{loop.index}}">
                                                <i class="fi {%if item.d_type==='1'%}fi-arrow-download{%else%}fi-cloud-download{%endif%} text-gray-400 fs-5"></i>
                                                <span class="d-inline-block px-2">{{item.d_title}}</span>
                                            </a>
                                        </li>
                                        {%endfor%}
                                    </ul>
                                    <!-- /specs list -->
                                </div>
                            </div>
                        </div>
                        {%for item in detail.cms_doc_download.content%}
                        <!-- Modal -->
                        <div class="modal fade" id="d-{{loop.index}}" data-bs-keyboard="false" tabindex="-1"
                            aria-labelledby="modalCenteredLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">

                                    <div class="modal-body">
                                        {%if item.d_password%}
                                        <h6>
                                            密码：<code>{{item.d_password}}</code>
                                        </h6>
                                        {%endif%}
                                        <div class="alert alert-primary mb-0" role="alert">
                                            点击下载无响应？ 是因为浏览器阻止了弹出窗口，网址输入框的最右边有个图标，点击后允许即可！
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                        <a href="{{item.d_url}}" type="button" class="btn btn-primary"
                                            target="_blank">点击下载</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {%endfor%}
                        <!-- /specifications -->
                        {% if detail.description %}
                        <div
                            class="p-2 mt-3 bg-primary-soft border-start border-end border-primary border-2 text-white rounded-xl">
                            <h3 class="h6">简介</h3>
                            <div class="small">
                                {{detail.description}}
                            </div>
                        </div>
                        {%endif%}

                    </div>


                </div>

                {%endif%}
                <p class="text-muted border-bottom pb-2 small mt-5">
                    最后更新时间: {{helper.moment(detail.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}
                </p>
                {%set tags = detail.tags|split(',')%}
                {%if tags%}
                <!-- Tags and share -->
                <div class="row">
                    <div class="col-12">

                        <h4 class="smaller text-muted">
                            相关标签
                        </h4>
                        {%for item in tags%}
                        <a href="#!" class="text-dark bg-light small rounded py-2 px-3 m-1 text-decoration-none"
                            rel="nofollow">
                            {{item}}
                        </a>
                        {%endfor%}
                    </div>
                </div>
                <!-- /Tags and share -->
                {%endif%}



                <!-- COMMENTS -->
                {%if detail.cms_classify.reply%}
                {% include "./comment_index.html" %}
                {%endif%}
                <!-- /COMMENTS -->







            </div>

            <div class="col-lg-3 order-1 order-lg-2 mb-5 d-none d-lg-block">


                <!-- SEARCH -->
                <form method="get" action="{{detail.classify_url}}" class="input-group-over d-block mb-2">

                    <div class="form-floating mb-3">
                        <input required placeholder="内容搜索..." id="blog_search" name="keywords" type="text" class="form-control">
                        <label for="blog_search">内容搜索...</label>
                    </div>

                    <button type="submit" class="btn smaller">
									<i class="fi fi-search m-0"></i>
								</button>

                </form>
                <!-- /SEARCH -->



                {%set classifyList = detail.classify_id|@classify('top')%} {%if classifyList%}
                <!-- CATEGORIES -->
                <nav
                    class="nav-deep nav-deep-light mb-3 shadow-xs shadow-none-md shadow-none-xs px-3 pb-3 p-0-md p-0-xs rounded">
                    <!-- mobile trigger : categories -->
                    <button
            class="clearfix btn btn-toggle btn-sm w-100 text-align-left shadow-md border rounded mb-1 d-block d-lg-none"
            data-bs-target="#nav_responsive"
            data-toggle-container-class="d-none d-sm-block bg-white shadow-md border animate-fadein rounded p-3"
          >
            <span class="group-icon px-2 py-2 float-start">
              <i class="fi fi-bars-2"></i>
              <i class="fi fi-close"></i>
            </span>
            <span class="h5 py-2 m-0 float-start"> 分类 </span>
          </button>

                    <!-- desktop only -->
                    <h5 class="py-3 m-0 d-none d-lg-block">分类</h5>

                    <!-- navbar : navigation -->
                    <ul id="nav_responsive" class="nav flex-column d-none d-lg-block">
                        {%for item in classifyList%}
                        <li
                            class="nav-item {%if (item.id ==classify.id) or (classify.id in (item.arrId or [])) %}active{%endif%}">
                            {%if item.children%}
                            <a class="nav-link px-0" href="#">
                                <span class="group-icon">
                  <i class="fi fi-arrow-end"></i>
                  <i class="fi fi-arrow-down"></i>
                </span>
                                <span class="px-2 d-inline-block"> {{item.title}} </span>
                            </a>
                            {%else%}
                            <a class="nav-link px-0" href="{{item.url}}">
                                <i class="fi fi-arrow-end m-0 smaller"></i>
                                <span class="px-2 d-inline-block"> {{item.title}} </span>
                            </a>
                            {%endif%} {%if item.children%}
                            <ul class="nav flex-column ps-2">
                                {%for _item in item.children%}
                                <li class="nav-item {%if _item.id ==classify.id%}active{%endif%}">
                                    <a class="nav-link" href="{{_item.url}}"> {{_item.title}} </a>
                                </li>
                                {%endfor%}
                            </ul>
                            {%endif%}
                        </li>
                        {%endfor%}
                    </ul>
                </nav>
                <!-- /CATEGORIES -->
                {%endif%}
                {% set hotlist = 'cms_doc'|@findAll({
                where:{
                classify_id:detail.classify_id
                },
                offset: 0,
                limit: 5,
                order:[['view','desc']]
                })%}
                {%if hotlist%}
                <div class="d-none d-lg-block">
                    <h3 class="h5 mt-5 mt-0-xs">热点</h3>

                    <ul class="list-unstyled mb-0">
                        {%for item in hotlist%}
                        <li class="list-item d-flex align-items-center position-relative mt-4">
                            <div class="ratio ratio-16x9 bg-light me-3" style="max-width: 50px;">
                                <div class="bg-cover rounded" style="background-image:url({{item.cover_url}});"></div>
                            </div>
                            <a href="/cms/detail/{{item.id}}"
                                class="link-normal small stretched-link">{{item.title|truncate(20, true, "...")}}</a>
                        </li>
                        {%endfor%}
                    </ul>

                </div>
                {%endif%}
                <!-- mobile trigger : expand -->

                <button class="mt-3 clearfix btn btn-toggle btn-sm w-100 text-align-left shadow-md border rounded mb-1 d-block d-lg-none" data-bs-target="#sidebar_expand_mobile" data-toggle-container-class="d-none d-sm-block bg-white shadow-md border animate-fadein rounded p-3">
								<span class="group-icon px-2 py-2 float-start">
									<i class="fi fi-bars-2"></i>
									<i class="fi fi-close"></i>
								</span>

								<span class="h5 py-2 m-0 float-start ">
									Explore
								</span>
							</button>

                <div id="sidebar_expand_mobile" class="d-none d-lg-block">
                    <!-- BANNER -->
                    <a href="#!"
                        class="mt-3 d-block text-center overlay-dark-hover overlay-opacity-2 rounded overflow-hidden">
                        <img class="w-100 img-fluid rounded" src="/public/assets/demo.files/images/unsplash/portfolio/thumb_330/boxed-water-is-better-6RTh34xCS1M-unsplash-min.jpg" alt="...">
                    </a>
                    <h4 class="small text-gray-500 fw-normal mt-1 mb-0">
                        Sponsored Ad
                    </h4>
                    <!-- /BANNER -->

                </div>

            </div>

        </div>

    </div>
</div>
<!-- end :: blog content -->

{% endblock %}
{%block script%}
<script>
    //评论
  var cms_comments_callback = function(from,data){
		if(data.status===1000){
          $.SOW.core.toast.show('danger', 'Error', data.msg, 'top-end');
        }else{
          $.SOW.core.toast.show('success', 'Success', data.msg, 'top-end');
          $(from).find('[name="content"]').empty()
					$.SOW.core.ajax_content.__ajaxDivProcess('cms_comments_container', '/cms/comments/ajaxList?doc_id={{detail.id}}', '#cms_comments_container',$.SOW.core.ajax_content.config.method,null,$.SOW.core.ajax_content.config.callback_function,$.SOW.core.ajax_content.config.callback_before_push);
        }
	}
	var cms_comments_reply_callback = function(from,data){
		if(data.status===1000){
          $.SOW.core.toast.show('danger', 'Error', data.msg, 'top-end');
        }else{
          $.SOW.core.toast.show('success', 'Success', data.msg, 'top-end');
          $(from).find('[name="content"]').empty()
					$('#sow_ajax_modal').modal('hide');
					$.SOW.core.ajax_content.__ajaxDivProcess('cms_comments_container', '/cms/comments/ajaxList?doc_id={{detail.id}}&page='+data.data, '#cms_comments_container',$.SOW.core.ajax_content.config.method,null,$.SOW.core.ajax_content.config.callback_function,$.SOW.core.ajax_content.config.callback_before_push);
        }
	 }
</script>
{%endblock%}